<!-- 搜索页面 -->
<template>
	<view>
		<!-- 搜索框 -->
		<search></search>

		<!-- 没有搜索时的页面 -->
		<view v-show="!search">
			<!-- 历史 -->
			<view class="content" v-if="SearchHistory.length !==0">
				<view class="content-top">
					<text>历史</text>
					<image @click="delSearchHistory" src="../../static/search/删除.png"></image>
				</view>
				<view class="content-body">
					<view class="content-item" v-for="(item,index) in SearchHistory" :key="index"
						@click="clickKey(item.name)">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

			<view class="recommend-item">
				<view class="title">
					<text>热搜榜</text>
				</view>
				<view class="body">
					<view class="item" v-for="(item,index) in HotSearchList" :key="index">
						<view class="left">{{index+1}}</view>
						<view class="right">{{item.searchWord}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 搜索成功后的页面 -->
		<view v-show="search">
			<view class="search-item" v-for="(item,index) in SearchRecommend" :key="index"
				@click="clickKey(item.keyword)">
				<image src="../../static/search/搜索.png"></image>
				<text>{{item.keyword}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from 'vuex'

	export default {
		data() {
			return {

			};
		},
		computed: {
			...mapState('search', ['search', 'SearchRecommend', 'HotSearchList', 'SearchHistory'])
		},
		methods: {
			...mapActions('search', ['GetHotSearchList']),
			...mapMutations('search', ['setSearch', 'setSearchHistory']),
			// 点击搜索关键字的模糊查询和搜索记录
			clickKey(key) {
				this.setSearch(key)
				if (key.trim()) {
					uni.redirectTo({
						url: '/pages/search_list/search_list'
					})
				}
			},

			// 清空搜索历史记录
			delSearchHistory() {
				uni.showModal({
					title: '提示',
					content: '确定清空全部历史记录？',
					success: res => {
						// 用户点击确定
						if (res.confirm) {
							this.setSearchHistory([])
							uni.removeStorage({
								key:'SearchHistory'
							})
						}
					}
				});
			}
		},
		onLoad() {
			// 获取热搜列表
			this.GetHotSearchList()

			// 初始化搜索历史记录
			let SearchHistory = uni.getStorageSync('SearchHistory')
			if (SearchHistory.length !== 0) {
				this.setSearchHistory(SearchHistory)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		margin-bottom: 30rpx;

		.content-top {
			display: flex;
			justify-content: space-between;
			width: 100%;

			text {
				color: #fff;
				font-size: 28rpx;
			}

			image {
				height: 40rpx;
				width: 40rpx;
			}
		}

		.content-body {
			display: flex;
			flex-wrap: wrap;

			.content-item {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 30rpx;
				padding: 20rpx 30rpx;
				border-radius: 30rpx;
				background-color: #2d2d2d;
				margin-top: 20rpx;
				margin-right: 20rpx;
			}

			text {
				color: #fff;
				opacity: 0.8;
				font-size: 25rpx;
			}
		}
	}

	.recommend-item {
		background-color: #2d2d2d;
		border-radius: 30rpx;
		padding: 0 20rpx 10rpx 20rpx;
		margin-right: 20rpx;

		.title {
			padding: 30rpx 0;
			border-bottom: 2rpx #8a8a8a solid;

			text {
				color: #fff;
				font-size: 32rpx;
			}
		}

		.body {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin: 30rpx 0;

			.item {
				display: flex;
				margin-bottom: 30rpx;
				width: 50%;

				.left {
					margin-right: 20rpx;
					color: #fff;
					opacity: 0.6;
				}

				.right {
					color: #fff;
					font-size: 28rpx;
					letter-spacing: 4rpx;
				}
			}
		}
	}

	.search-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		border-bottom: 2rpx #5b5b5b solid;

		image {
			height: 30rpx;
			width: 30rpx;
			margin-right: 20rpx;
			opacity: 0.8;
		}

		text {
			color: #fff;
			font-size: 28rpx;
		}
	}
</style>
